<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios中的拦截器</title>
    <script src="js/axios.min.js"></script>
</head>
<body>
<!--
    axios 请求拦截器
        1. 是什么？
            在真正发请求前执行的一个回调函数
        2. 作用：
            对所有的请求做统一的处理：追加请求头、追加参数、界面 loading 提示等等
    axios 响应拦截器
        1. 是什么？
            得到响应之后执行的一组回调函数
        2. 作用：
            若请求成功，对成功的数据进行处理
            若请求失败，对失败进行统一的操作
 -->
<button id="btn1">点我获取数据</button>
<script type="text/javascript">

    const btn1 = document.getElementById('btn1')

    // 请求拦截器
    axios.interceptors.request.use((config) => {
        if (Date.now() % 2 === 0) {
            config.headers.token = 'rnny'
        }
        console.log(config)
        return config
    })

    // 响应拦截器
    axios.interceptors.response.use(
        response => {
            console.log('响应拦截器成功的回调执行了')
            if (Date.now() % 2 === 0) return response.data
            else return '时间戳不是偶数，不能给你数据'
        },
        error => {
            console.log('响应拦截器失败的回调执行了')
            alert(error)
            return new Promise(() => {})
        }
    )

    btn1.onclick = async () => {
        const response = await axios.get('http://localhost:5000/persons')
        console.log(response)
    }
</script>
</body>
</html>
